<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
<div class="col-10 pt-2">
    <!--            这里显示商品列表-->
    <!--            themlyme模板显示-->
    <div class="row text-center">
        <div class="col-9"></div>
        <div class="col-3">
            <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <th>序号</th>
        <th>房间号</th>
        <th>价格</th>
        <th>客人数量</th>
        <th>房间类型</th>
        <th>客人信息</th>
        <th>管理</th>
        </thead>
        <tbody>
        <tr th:each="goods:${data}">
            <td th:text="${goods.getId()}"></td>
            <td th:text="${goods.name}"></td>
            <td th:text="${goods.getPrice()}"></td>
            <td th:text="${goods.getQuantity()}"></td>
            <td th:text="${goods.getCategory()}"></td>
            <td th:text="${goods.getSupplier()}"></td>
            <td>
                <button class="btn btn-danger" th:onclick="del([[${goods.getId()}]])">删除</button>
                <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-info"
                        th:onclick="update([[${goods.getId()}]],[[${goods.name}]],[[${goods.getPrice()}]],
                                     [[${goods.getQuantity()}]],[[${goods.getCategory()}]],[[${goods.getSupplier()}]])">更新</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!--    模态框测试-->
<!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增商品</h4>
            </div>
            <div class="modal-body">
                <!--                    新增表单区&ndash;&gt;-->
                <form method="post" action="/goods/goodsAddProcess">
                    <div class="form-control">
                        <label for="">房间号</label>
                        <input type="text" name="name" id="">
                    </div>
                    <div class="form-control">
                        <label for="">价格</label>
                        <input type="text" name="price" id="">
                    </div>
                    <div class="form-control">
                        <label for="">客人数</label>
                        <input type="text" name="quantity" id="">
                    </div>
                    <div class="form-control">
                        <label for="">房间种类</label>
                        <input type="text" name="category" id="">
                    </div>
                    <div class="form-control">
                        <label for="">客人姓名</label>
                        <input type="text" name="supplier" id="">
                    </div>
                    <div class="form-control">
                        <input type="submit" value="提交" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--  定义更新子窗体模态框代码区-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">更新商品</h4>
            </div>
            <div class="modal-body">
                <div class="form-control">
                    <label for="">序号</label>
                    <input type="text" name="id" id="Id"  disabled="disabled">
                </div>
                <div class="form-control">
                    <label for="">房间号</label>
                    <input type="text" name="name" id="name" >
                </div>
                <div class="form-control">
                    <label for="">房间价格</label>
                    <input type="text" name="price" id="price" >
                </div>
                <div class="form-control">
                    <label for="">客人数量</label>
                    <input type="text" name="quantity" id="quantity">
                </div>
                <div class="form-control">
                    <label for="">房间类型</label>
                    <input type="text" name="category" id="category">
                </div>
                <div class="form-control">
                    <label for="">客人姓名</label>
                    <input type="text" name="supplier" id="supplier">
                </div>
                <div class="form-control">
                    <button class="btn btn-danger" id="btnUpdate">更新</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->



<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    <!--   删除函数方法-->
    function del(id){
//     确认是否删除
        var flag = confirm("是否删除该条记录?");
        if(flag==true){
            //     使用ajax传递参数的方法交给后端去做处理
            $.post("/api/goodsDelete",{'id':id},function(res){
                console.log(res)
                if(res==1){
                    alert("删除成功!");
                    location.reload();
                }else{
                    alert("删除失败!");
                }
            })
        }
    }

    // 更新
    function  update(id,name,price,number,category,supplier){
//    肯定有了这个商品的信息，包括商品的所有字段值
        console.log(id,name,price,number)
//     单独去给更新代码块的表单value赋值
        $('#Id').val(id);
        $('#name').val(name);
        $('#price').val(price);
        $('#quantity').val(number);
        $('#category').val(category);
        $('#supplier').val(supplier);
//     去使用ajax方式提交处理
    }
    // 提交更新处理
    $('#btnUpdate').click(function(){
        var flag = confirm("确认提交更新?");
        if(flag==true){
            $.post("/api/goodsUpdateProcess",{"id":$('#Id').val(),"name":$('#name').val(),"price":$('#price').val(),
                "quantity":$('#quantity').val(),"category":$('#category').val(),"supplier":$('#supplier').val()
            },function(res){
                if(res==1){
                    alert("更新ok");
                    location.href="/goods/goodsList";
                }else{
                    alert("更新失败!");
                }
            })
        }
    })
</script>